<!--
  组件：地图比例尺（vue2语法）
  作者：kuake
  时间：2023年09月24日
  网址：https://gis.1024ape.com
  系统：WebGIS 地理信息平台
-->
<template>
	<div ref="fmScaleControl" class="fm-scale-control">
		<span>{{ scaleControlText }}</span>
	</div>
</template>
<script>
import { mapState } from 'pinia'
import { useMapStore } from '../../stores/mapStore'

export default {
	name: 'FmScaleLine',
	computed: {
		...mapState(useMapStore, ['map'])
	},
	watch: {
		map(val) {
			// 监听地图分辨率变化，实时更新比例尺
			this.listenMapScaleResolution(val)
			// 默认先更新加载一次
			this.updateScaleControlText(val)
		}
	},
	data() {
		return {
			scaleControlText: ''
		}
	},
	methods: {
		updateScaleControlText(map) {
			// 获取当前地图视图的比例尺
			const scale = map.getView().getResolution()
			// 格式化并更新比例尺的显示值
			this.scaleControlText = `比例尺 1:${scale.toFixed(0)} km`
		},
		listenMapScaleResolution(map) {
			// 监听地图视图的变化事件
			map.getView().on('change:resolution', () => {
				this.updateScaleControlText(map)
			})
		}
	}
}
</script>

<style scoped lang="scss">
.fm-scale-control {
	width: 8.5rem;
	position: absolute;
	bottom: 4rem;
	left: 0.5rem;
	padding: 0.5rem;
	box-sizing: border-box;
	background: #000;
	color: #fff;
	font-size: 0.8rem;
}
</style>
